<template>
	<view>
		<u-sticky>
			<view class="bj1">
				<span class="sj">垃圾分类</span>
			</view>
		</u-sticky>
		<u-sticky offset-top="100">
			<view style="width: 30%;height: 500px;background-color: #FFFFFF;">
				<view v-for="(item,index) in list">
					<view v-if="khs==0" @click="getlj(item.classificationId)" style="width: 100%;height: 45px;background-color: #FFFFFF;position: relative;top: 10px;">
						<view style="width: 5px;height: 100%;background-color: #FFFFFF;"></view>
						<span style="color: #333333;font-size: 15px;margin-left: 20px;position: relative;top: -34px;"><b>{{item.name}}</b></span>
					</view>
					<view v-if="khs==1" style="width: 100%;height: 45px;background-color: #FFFFFF;position: relative;top: 10px;">
						<view style="width: 5px;height: 100%;background-color: #f56c6c;"></view>
						<span style="color: #f56c6c;font-size: 15px;margin-left: 20px;position: relative;top: -34px;"><b>{{item.name}}</b></span>
					</view>
				</view>
			</view>
		</u-sticky>
		
		<view style="width: 70%;height: 800px;background-color: #EAE9E5;margin-left: 113px;margin-top: -500px;">
			<view v-for="item in classification" style="width: 220px;height: 270px;background-color: #FFFFFF;position: relative;top: 20px;border-radius: 10px;margin-left: 20px;">
				<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 20px;margin-top: 3px;border-radius: 15px;display: inline-block"></view>
				<span style="margin-left: 12px;font-size: 15px;color: #333333;"><b>{{item.name}}</b></span>
				<view v-for="item1 in item.classificationList" style="width: 100%;height: 50px;background-color: #FFFFFF;">
					<span style="margin-left: 12px;font-size: 15px;color: #333333;"><b>{{item1.name}}</b></span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				khs:0,
				list:[],
				classification:[],
			}
		},
		onLoad() {
			this.initc()
			this.getlj(1)
		},
		methods: {
			getlj(id){
				
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/getlj',
					method: 'GET',
				   data: {
					   id: id,
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(result)
						this.classification=res.data.data.classification
						
					},
				})	
			},
			initc(){
				uni.request({
				url:'http://localhost:9525/xkuser/ljp/initclassfl',
				method: 'GET',
			   data: {
				   // keyword: this.keyword,
			   },
			   dataType:'json',
			   success: (res) => {
					// var result = JSON.parse(res.data.data.message);
					var result = res.data.message;
					console.log(result)
					this.list=res.data.data.list
					
				},
			})	
			},
			
		}
	}
</script>

<style>
	.sj{
		font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
		    font-weight: 700;
		    font-size: 20px;
		    color: #FFFFFF;
		    margin-left: 15px;
			position: absolute;
			top: 20px;
	}
	
	.bj1{
		width:100%;
		height:200rpx;
		background-image: url(../../static/indeimg/xia.png);
		
	}
</style>
